<template lang="pug">
.info
  .info-section
    .info-section-header
      .info-section-title 基本信息
      el-button(name="primary" size="small" @click="edit" v-if="userInfo.roleId === 1") 编辑
    .info-form
      .form-item
        .form-item-label 供应商名称：
        .form-item-bd
          .form-item-value {{detail.companyName}}
      .form-item
        .form-item-label 登录账号：
        .form-item-bd
          .form-item-value {{detail.userName}}
      .form-item
        .form-item-label 联系人：
        .form-item-bd
          .form-item-value {{detail.personsInChargeOfCompany}}
      .form-item
        .form-item-label 电话号码：
        .form-item-bd
          .form-item-value {{detail.personsInChargeOfCompanyPhone}}
      .form-item
        .form-item-label 联系地址：
        .form-item-bd
          .form-item-value {{detail.detailAddress}}
      .form-item
        .form-item-label 主营产品：
        .form-item-bd
          .form-item-tags
            .tag-item(v-for="item in detail.mainBusinessList") {{item.classificationName}}
      .form-item
        .form-item-label 擅长业态：
        .form-item-bd
          .form-item-tags
            .tag-item(v-for="item in detail.styleList") {{item.styleName}}
      .form-item-section(v-for="item in detail.personsContactList")
        .form-item
          .form-item-label 销售负责人：
          .form-item-bd
            .form-item-value {{item.name}}
        .form-item
          .form-item-label 销售负责人邮箱：
          .form-item-bd
            .form-item-value {{item.mail}}
      .form-item.form-item-start
        .form-item-label 公司LOGO：
        .form-item-bd
          .form-item-imgs
            .item-img(:style="detail.companyLogoUrl | filterUrl" @click="preview(detail.companyLogoUrl)")
      .form-item.form-item-start
        .form-item-label 公司证书：
        .form-item-bd
          .form-item-imgs
            .item-img(v-for="item in detail.supplierQualificationList" :style="item.qualificationFileUrl | filterUrl" @click="preview(item.qualificationFileUrl)")
  .info-section
    .info-section-header
      .info-section-title 公司简介
    .info-section-bd
      .info-section-html(v-html="detail.companyProfile")
</template>

<script>
import { getSupplierCompanyById } from 'api'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'basicInfo',
  data () {
    return {
      detail: {
        companyName: ''
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user
    })
  },
  methods: {
    ...mapActions([
      'changePreviewModal'
    ]),
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getSupplierCompanyById)
        this.detail = ResultSet.userData.result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    preview (url) {
      this.changePreviewModal({ show: true, url: url })
    },
    edit() {
      this.$router.push({ name: 'editInfo' })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  }
} 
</script>

<style lang="scss" scoped>
.info {
  padding: 0 32px 16px;
}
.info-section {
  width: 100%;
  padding: 0 24px 12px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 4px;
}
.info-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #CBCBCB;
}
.info-section-title {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.info-form {
  margin-top: 23px;
}
.form-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 19px;
  &.form-item-start {
    align-items: flex-start;
  }
}
.form-item-label {
  color: #909090;
  min-width: 150px;
}
.form-item-value {
  color: #363636;
}
.form-item-tags {
  display: flex;
  .tag-item {
    padding: 5px 16px;
    font-size: 14px;
    color: #363636;
    background: #F3F3F3;
    border-radius: 4px;
    margin-right: 8px;
  }
}
.form-item-imgs {
  display: flex;
  .item-img {
    width: 96px;
    height: 96px;
    border-radius: 4px;
    margin-right: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.info-section-bd {
  margin-top: 25px;
}
</style>
